<template>
  <div class="todo-footer" v-show="total">
     <label>
		<!-- <input type="checkbox" 
    :checked='isAll' 
    @change="checkAll"/> -->
    <input type="checkbox" v-model="isAll">
	 </label>
     <span> 
      <span>已完成{{doneTotal}}</span>
        /全部{{total}} 
     </span>
	 <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
 </div>
</template>
 
<script>
export default {
 name:"Footer",
 props:['todos','checkAllTodo','clearAllTodo'],
 computed:{
  // 总数
   total(){
      return this.todos.length
  },
  // 勾选计数
   doneTotal(){
      //#region 
      //  let count = 0
      //  this.todos.forEach((todo) => {
      //     if(todo.done) count++
      //  })
      // return count 


      // const count = this.todos.reduce((pre,current)=>{
      //      console.log("@",pre,current);
      //      return pre + (current.done?1:0)
      // },0)
      // reduce函数数组多长reduce的回调函数调用几次, 第一次回调的pre参数的值是reduce的第二项参数的值,reduce 回调第二次调用是第一次回掉函数的返回值 之后下一次的pre值就是上一次回调的返回值  current是数组的每一项(且Vue对reduce包装成响应式)
      // console.log(count);
      // return count
      //#endregion
       return this.todos.reduce((pre,current)=>pre+ (current.done?1:0),0)
   },
  //  控制每一项都勾选,全选也勾选
   isAll:{
     get(){
      return this.total === this.doneTotal && this.total>0
     },
     set(value){
        this.checkAllTodo(value)
     }
   }
 },methods: {
  // checkAll(e){
  //  this.checkAllTodo(e.target.checked)
  // }
  clearAll(){
    if(confirm("确定要全部清除吗？"))
     this.clearAllTodo()
  }
 },
  
}
</script>

<style scoped>
.todo-footer {
	height: 40px;
	line-height: 40px;
	padding-left: 6px;
	margin-top: 5px;
}
.todo-footer label {
	display: inline-block;
	margin-right: 20px;
	cursor: pointer;
}
.todo-footer label input {
	position: relative;
	top: -1px;
	vertical-align: middle;
	margin-right: 5px;
}
.todo-footer button {
	float: right;
	margin-top: 5px;
}
</style>